<template>

 <div>
    <h1 style="color: #ccc;">{{ msg }}</h1>
    <input type="text" v-model="title" @keypress.enter="todoStore.addTodo(title)">
    &nbsp;&nbsp;&nbsp;
    <button @click="todoStore.addTodo(title)">添加</button>
    <ul>
        <li v-for="todo in todoStore.todos" :key="todo.id">
            <todoItem :todo="todo"/>
        </li>
    </ul>
 </div> 

</template>

<script setup lang='ts'>
import todoItem from './todoItem.vue'
import { useTodoStore } from '../store/todo'
import { ref } from 'vue';
defineProps<{
    msg:string
}>()
let title = ref("")
const todoStore = useTodoStore()

</script>

<style scoped>

</style>
